html {
    font-size: $font-size-base;
    letter-spacing: 0.33px;
    scroll-behavior: smooth;
    touch-action: manipulation;
}

html,
body {
    min-width: $body-min-width;
    overflow-x: hidden;
}

body {
    color: $body-font-color;
    background: $body-background;

    font-weight: $body-font-weight;

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    box-sizing: border-box;

    * {
        box-sizing: inherit;
    }
}

h1,
h2,
h3,
h4,
h5 {
    font-weight: $body-font-weight;
}

a {
    text-decoration: none;
    color: $color-link;
}

img {
    vertical-align: baseline;
}

aside nav ul {
    padding: 0;
    margin: 0;
    list-style: none;

    li {
        margin: 1em 0;
        position: relative;
    }

    a {
        display: block;
    }

    a:hover {
        opacity: 0.5;
    }

    ul {
        padding-inline-start: $padding-16;
    }
}

ul.pagination {
    display: flex;
    justify-content: center;
    list-style-type: none;

    .page-item a {
        padding: $padding-16;
    }
}

.container {
    max-width: $container-max-width;
    margin: 0 auto;
}

.book-icon {
    filter: $icon-filter;
}

.book-brand {
    margin-top: 0;

    img {
        height: 1.5em;
        width: auto;
        vertical-align: middle;
        margin-inline-end: $padding-8;
    }
}

.book-menu {
    flex: 0 0 $menu-width;
    font-size: $font-size-14;

    nav {
        width: $menu-width;
        padding: $padding-16;

        @include fixed;
    }

    a {
        color: inherit;
        word-wrap: break-word;
    }

    a.active {
        color: $color-link;
    }

    a.collapsed {
        display: flex;
        justify-content: space-between;

        &::after {
            content: "▸";
        }
    }
}

.book-section-flat {
    margin-bottom: $padding-16 * 2;

    &:not(:first-child) {
        margin-top: $padding-16 * 2;
    }

    >a,
    >span {
        font-weight: bolder;
    }

    >ul {
        padding-inline-start: 0;
    }
}

.book-page {
    min-width: $body-min-width;
    flex-grow: 1;
    padding: $padding-16;
}

.book-post {
    margin-bottom: $padding-16 * 3;
}

.book-header {
    display: none;
    margin-bottom: $padding-16;

    label {
        line-height: 0;
    }
}

.book-search {
    position: relative;
    margin: $padding-16 0;
    border-bottom: 1px solid transparent;

    input {
        width: 100%;
        padding: $padding-8;

        border: 0;
        border-radius: $border-radius;

        background: $gray-100;
        color: $body-font-color;

        &:required+.book-search-spinner {
            display: block;
        }
    }

    .book-search-spinner {
        position: absolute;
        top: 0;
        margin: $padding-8;
        margin-inline-start: calc(100% - #{$padding-16 + $padding-8});

        width: $padding-16;
        height: $padding-16;

        border: $padding-1 solid transparent;
        border-top-color: $body-font-color;
        border-radius: 50%;

        @include spin(1s);
    }
}

.book-toc {
    flex: 0 0 $toc-width;
    font-size: $font-size-12;

    nav {
        width: $toc-width;
        padding: $padding-16;

        @include fixed;
    }

    img {
        height: 1em;
    }

    nav>ul>li:first-child {
        margin-top: 0;
    }
}

.book-footer {
    padding-top: $padding-16;
    font-size: $font-size-14;

    img {
        height: 1em;
        margin-inline-end: $padding-8;
    }
}

.book-comments {
    margin-top: $padding-16;
}

.book-languages {
    position: relative;
    overflow: visible;

    padding: $padding-16;
    margin: -$padding-16;

    ul {
        margin: 0;
        padding: 0;
        list-style: none;

        li {
            white-space: nowrap;
            cursor: pointer;
        }
    }

    &:hover,
    &:focus,
    &:focus-within {
        .book-languages-list {
            display: block;
        }
    }

    .book-languages-list {
        display: none;

        position: absolute;
        bottom: 100%;
        left: 0;
        padding: $padding-8 0;

        background: $body-background;
        box-shadow: 0 0 $padding-4 rgba(0, 0, 0, 0.1);

        li img {
            opacity: 0.25;
        }

        li.active img,
        li:hover img {
            opacity: 1;
        }

        a {
            color: inherit;
            padding: $padding-8 $padding-16;
        }
    }
}

.book-home {
    padding: $padding-16;
}

// Responsive styles
aside nav,
.book-page,
.book-header aside,
.markdown {
    transition: 0.2s ease-in-out;
    transition-property: transform, margin, opacity;
    will-change: transform, margin;
}

@media screen and (max-width: $mobile-breakpoint) {
    .book-menu {
        margin-inline-start: -$menu-width;
        font-size: $font-size-base;
    }

    .book-toc {
        display: none;
    }

    .book-header {
        display: block;
    }

    .docs-footer {
        display: none;
    }

    #TableOfContents {
        display: none;
    }

    #menu-control:checked+main {

        .book-menu nav,
        .book-page {
            transform: translateX($menu-width);
        }

        .book-header aside,
        .markdown {
            opacity: 0.25;
        }

        .book-menu-overlay {
            display: block;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    }

    //for RTL support
    body[dir="rtl"] #menu-control:checked+main {

        .book-menu nav,
        .book-page {
            transform: translateX(-$menu-width);
        }
    }

    #toc-control:checked+aside {
        display: block;
    }
}

// Extra space for big screens
@media screen and (min-width: $container-max-width) {

    .book-page,
    .book-menu nav,
    .book-toc nav {
        padding: $padding-16 * 2 $padding-16;
    }
}